<template>
    <div class="home-wrap">
        <div class="web-header">
            <div class="header">
                <div class="right-area">
                    <div class="head-left-content">
                        <img :src="configObj.homeLogo" alt="">
                        <a href="http://www.shineland.org/" target="blank">南翔智地</a>
                        <a href="http://www.keji50.com/" target="blank">科技50</a>
                    </div>
                    <div class="head-right-content">
                        <a href="#about">关于我们</a>
                        <a href="#news">新闻资讯</a>
                        <div  v-if="!name" class="btn-link"  @click="linkTo('/login')">注册/登录</div>
                        <div v-if="name">
                            <div class="r-block logout r-pointer" @click="loginOut()"><span class="fa fa-sign-out">退出登录</span></div>
                            <div class="r-block separator"><span>|</span></div>
                            <div class="r-block nikname">你好，{{name}}</div>
                        </div>
                        <div v-if="name"  class="r-block separator"><span>|</span></div>
                        <div v-if="name"  @click="handleLink" style="margin-left:20px" class="r-block r-pointer"><span style="margin-right:12px;color: #D1D1D1;">|</span> 管理中心</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-wrap">
            <el-carousel>
                <el-carousel-item v-if="bannerArr.length" v-for="(item,index) in bannerArr" :key="index">
                 <a :href="item.url?item.url:'#'" :style="'cursor:pointer;display: block;background-image: url(' + item.imageList[0].fileUrl + ');background-size: cover;background-repeat:no-repeat;background-position:center;'"></a> 
                </el-carousel-item>
                <el-carousel-item v-if="!bannerArr.length">
                 <a class="banner" style="display:block;height:499px;width:100%;backgroundSize:100%;backgroundSize:cover;backgroundRepeat:no-repeat;" ></a> 
                </el-carousel-item>
            </el-carousel>
        </div>  
        <div class="total-num">
            <div class="total-list">
                <div class="list-num"><span class="num"><v-countup :duration="3" :start-value="start"  :end-value="end"></v-countup></span><span class="num-name">家</span> </div>
                <div class="list-name">入驻企业</div>
            </div>
            <div class="total-list">
                <div class="list-num"><span class="num"><v-countup :duration="3" :start-value="start"  :end-value="end1"></v-countup></span><span class="num-name">次</span> </div>
                <div class="list-name">融资服务</div>
            </div>
            <div class="total-list">
                <div class="list-num"><span class="num"><v-countup :duration="3" :start-value="start" :decimals="1" :end-value="end2"></v-countup></span><span class="num-name">亿</span></div>
                <div class="list-name">放贷金额</div>
            </div>
        </div>
        <!-- 金融服务 -->
        <div class="product-service">
            <div class="title">
                <div class="name">金融服务</div>
                <div>Financial service</div>
            </div>
            <div class="service-wrap box">
                <div class="service-loan">
                    <div class="service-title">风险贷款</div>
                    <div class="service-item">
                        <div v-if="index<=1" class="service-list" @click="linkTo('/productDetail',item.id)" v-for="(item,index) in dataList" :key="index">
                            <img :src="item.photoFiles[0].fileUrl" alt="">
                            <div class="service-infos">
                                <div class="title-text over-hidden">{{item.productName}}</div>
                                <div class="service-line over-hidden">
                                    <div class="line-item over-hidden"><span>贷款额度：</span>{{item.loanFundMin+' 万元'+' ~ '+item.loanFundMax+' 万元'}}</div>
                                    <div class="line-item over-hidden"><span>贷款年限：</span>{{item.investYearDesc}}</div>
                                    <div class="line-item over-hidden"><span>贷款利率：</span>{{item.minReportRate}}%/年</div>
                                </div>
                                <div class="service-line">
                                    <div class="line-item over-hidden"><span>区域限制：</span>{{returnArrName(item.areaDatas)}}</div>
                                    <div class="line-item over-hidden"><span>企业年限：</span>{{item.applyMixYear + '年'}}</div>
                                    <div class="line-item over-hidden"><span>盈利要求：</span>{{item.applyMixIncome?returnPrice(item.applyMixIncome)+'万':'无要求'}}</div>
                                </div>
                                 <div class="line-list"><span>资金主体：</span>{{returnBody(item.fundBodyDatas)}}</div>
                                 <div class="line-list"><span>申请条件：</span>{{item.applyProfit == 'y'?'需盈利':'无要求'}}</div>
                                <div class="service-btn">立即申请</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="service-investment">
                    <div class="service-title">风险投资</div>
                        <div class="service-item">
                            <div  class="service-list" >
                                <img src="../../images/waterHome/img6.png" alt="">
                                <div class="service-infos">
                                    <div class="title-text over-hidden">创业引导基金<div class="state">基金规模近100亿</div></div>
                                    <div class="service-desc">投资领域以人工智能、生命健康、智能硬件与智能制造、文化娱乐等新兴行业和领域为主。投资阶段涵盖早中期权投资等手段。单个项目的投资比例原则上不超过整体额度的10%</div>
                                    <a href="#about"><div class="service-btn">联系我们</div></a>
                                </div>
                            </div>
                        </div>
                </div>
            </div>
        </div>
        <!-- 服务案例 -->
        <div class="service-case">
            <div class="title">
                <div class="name">服务案例</div>
                <div>Service case</div>
            </div>
            <div class="case-wrap">
                <el-carousel :interval="5000" arrow="always">
                    <el-carousel-item>
                        <div class="case-item box">
                            <div class="case-list">
                                <div class="case-head box box-align-center">
                                    <img src="../../images/waterHome/case1.png" alt="">
                                </div>
                                <div class="case-title">REALMAX</div>
                                <div class="case-desc">AR（增强现实）计算企业，推动增强现实的人工智能技术在国家平台上规模化行业应用。自主研发的Realweb云平台采用WebAR技术提供了安全的场景数据服务，让用户体验没有屏幕边界的数字信息。</div>
                            </div>
                            <div class="case-list">
                                <div class="case-head box box-align-center">
                                    <img src="../../images/waterHome/case2.png" alt="">
                                </div>
                                <div class="case-title">蜂电科技</div>
                                <div class="case-desc">一家电力物联网高科技公司，利用自主研发的电力线载波芯片，将所有插在电线上的设备都连接到云端。公司成立于2013年，拥有一支20多年经营的软硬件技术研发团队，在物联网领域取得了骄人的业绩。</div>
                            </div>
                            <div class="case-list">
                                <div class="case-head box box-align-center">
                                    <img src="../../images/waterHome/case3.png" alt="">
                                </div>
                                <div class="case-title">温尔诊断</div>
                                <div class="case-desc">“温尔诊断是一家有温度的公司”，成立以来，立足于国际CDM-HDM 的主流市场。公司创办人有20多年医疗领域经验，研究无创医疗诊断技术10余年，是上海交通大学国家产业研究院体温监测与健康研究所所长。</div>
                            </div>
                            <div class="case-list">
                                <div class="case-head box box-align-center">
                                    <img src="../../images/waterHome/case4.png" alt="">
                                </div>
                                <div class="case-title">小鸟推送</div>
                                <div class="case-desc">小鸟推送是杭州诺霖互动科技股份有限公司自主研发的高ROI 移动营销DSP平台，为垂直行业提供以大数据智能分析为基础的，开放的全域全链路的一站式场景化企业级SaaS移动营销服务。</div>
                            </div>
                        </div>
                    </el-carousel-item>
                    <el-carousel-item>
                        <div class="case-item box">
                            <div class="case-list">
                                <div class="case-head box box-align-center">
                                    <img src="../../images/waterHome/case5.png" alt="">
                                </div>
                                <div class="case-title">乘讯科技</div>
                                <div class="case-desc">上海乘讯信息科技有限公司创立于2015年，总部位于上海，在深圳、四川、台湾设有销售分支机构。公司主要从事高速通讯测试设备及40G/100G/200G/400G超高速光通讯模组的研究开发和销售。</div>
                            </div>
                            <div class="case-list">
                                <div class="case-head box box-align-center">
                                    <img src="../../images/waterHome/case6.png" alt="">
                                </div>
                                <div class="case-title">益企保</div>
                                <div class="case-desc">益企保为保险用户提供商业健康保险实时理赔服务，并结合银行卡及第三方支付业务，为保险用户提供保险理赔+多种金融支付方式的完整支付方案。其次为保障用户体验，益企宝不断拓展医药服务网络的适用范围。</div>
                            </div>
                            <div class="case-list">
                                <div class="case-head box box-align-center">
                                    <img src="../../images/waterHome/case8.png" alt="">
                                </div>
                                <div class="case-title">翼畅司机宝</div>
                                <div class="case-desc">定位为“大宗商品物贸一体化综合运营服务支持平台”，是全国首批无车承运人试点单位，致力于完善我国的大宗商品供应链及物流生态链，开创互联网化的“供应链技术+物流服务+金融科技”的创新模式。</div>
                            </div>
                            <div class="case-list">
                                <div class="case-head box box-align-center">
                                    <img src="../../images/waterHome/case7.png" alt="">
                                </div>
                                <div class="case-title">罐头生活</div>
                                <div class="case-desc">罐头生活Canlife于2012年5月开始运作，通过从一碗一筷，到一桌一椅，Canlife罐头生活甄选来自全球的高品质家居产品，让消费者在欣赏家居美图的同时可以轻松购买软装产品，拉近消费者与家居软装设计的距离。</div>
                            </div>
                            
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <!-- 新闻资讯 -->
        <div class="news-wrap" id="news">
            <div class="title">
                <div class="name">新闻资讯</div>
                <div>News</div>
            </div>
            <div class="news-content box">
                <el-carousel height="351px" ref="carousel" :autoplay="false">
                    <el-carousel-item name="index" v-for="(item,index) in newsArr" :key="index">
                        <img :src="item.imgUrl" alt="">
                        <div class="news-modal"></div>
                        <div class="news-text">{{item.title}}</div>
                    </el-carousel-item>
                    <div class="news-nums box">
                        <div class="new-num" :class="{active:newsIndex == index}" @click="changeSwiper(index)" v-for="(item,index) in newsArr" :key="index">{{index+1}}</div>
                    </div>
                </el-carousel>
                <div class="news-item">
                    <div class="news-list box" v-for="(item,index) in newsArr" :key="index">
                        <div class="dates">
                            <div>{{item.year}}</div>
                            <div>{{item.date}}</div>
                        </div>
                        <div class="news-infos">
                            <a :href="item.link" target="blank" class="news-title">{{item.newsName}}</a>
                            <a :href="item.link" target="blank" class="news-desc">{{item.newsDesc}}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="price-wrap">
            <div class="title">
                <div class="name">风险贷款</div>
                <div>venture capital</div>
            </div>
            <div class="service-info">
                <!-- <video controls src="http://www.w3school.com.cn/i/movie.ogg"></video> -->
                <div class="price-info">
                    <div class="info-title box box-align-center"><div class="icon"></div> 什么是风险贷款</div>
                    <p>风险贷款，也称为风险借贷，作为风险投资的最佳搭配，为快速成长的企业及其投资者带来了巨大的价值。 </p>
                    <p>在成长的过程中，创业公司通过不断的迈入新的里程碑提升企业价值。</p>
                    <p>在这个过程中，企业需要通过在多个时间节店注入风险投资来保持企业的扩张。</p>
                    <p>因此，最佳的融资时间是在每一个价值驱动点之后。</p>
                    <p>通过风险投资搭配风险贷款，获得同样的资金的同时降低对于股份的稀释。</p>
                </div>
                <video-player  class="video-player-box vjs-big-play-centered video-style"
                    ref="videoPlayer"
                    :options="playerOptions"
                    :playsinline="true"
                    customEventName="customstatechangedeventname">
                    Your browser does not support the video tag.
                </video-player>
            </div>
        </div>
        <div class="agency-wrap">
            <div class="title">
                <div class="name">合作机构</div>
                <div>Cooperative agency</div>
            </div>
            <div class="agency-content">
                <div class="agency-list" v-for="(item,index) in 17" :key="index">
                    <img :src="require('../../images/waterHome/bank'+(index+1)+'.png')" alt="">
                </div>
                <div class="agency-list line">持续更新中...</div>
            </div>
        </div>
        <div class="about-wrap" id="about">
            <div class="title">
                <div class="name">平台介绍</div>
                <div>About US</div>
            </div>
            <div class="about-container">
                <img class="img-left" src="../../images/waterHome/water.png" alt="">
                <div class="about-content">
                    <div>“水楼台”小微企业金融服务平台是一家立足于南翔、辐射整个嘉定区的综合性企业服务机构。目前平台已在联合上海嘉定区相关部门，建立了3家区级金融服务平台。</div>
                    <div>1、南翔智地“科技50创业银行”
        由上海市嘉定区南翔镇人民政府、上海南翔创业投资有限公司、中国建设银行股份有限公司嘉定支行、上海领投羊资产管理有限公司、上海觅邻信息科技有限公司共同发起成立。</div>
                    <div>2、嘉定区众创空间联合会“小微金服”
        由上海市嘉定区众创空间联合会、上海南翔创业投资有限公司、中国建设银行股份有限公司嘉定支行、中国银行股份有限公司嘉定支行、上海银行股份有限公司嘉定支行、南京银行股份有限公司上海分行、杭州银行股份有限公司上海分行、嘉定民生村镇银行、上海觅邻信息科技有限公司等共同发起成立。</div>
                    <div>3、嘉定区“知更鸟知识产权银行"
        由上海市知识产权局、上海市嘉定区人民政府、上海市嘉定区科技技术委员会、上海市嘉定区知识产权局、上海市嘉定区南翔镇人民政府指导，上海南翔智地投资管理有限公司发起成立。</br>通过联合产业上下游合作伙伴，为中小微企业打造集“评估、质押、融资、处置”于一体的知识产权生态服务链。帮助中小微企业运用自身专利、版权商标等知识产权扩大融资渠道，搭建融资平台，实现点“识”成金。</div>
                    <div>平台秉承“大众创业、万众创新”的服务理念，始终围绕以小微企业为服务对象、以创业孵化为服务宗旨、以科技创新为服务范畴，为把上海建设成为全球有影响力的科技创新中心而不懈努力。</div>
                </div>
            </div>

            <div class="btns box box-pack-center">
                <a href="mailto:mihuabin@shuiloutai.com"  class="btn-concat">联系我们：Kefu@shuiloutai.com</a>
            </div>
        </div>
        <div class="footer">
            <div class="footer-wrap">
                <p>地址：上海市嘉定区沪宜公路1188号3号楼<a href="http://www.miitbeian.gov.cn/" target="_blank" rel="nofollow">晋ICP备18008687号</a> </p>
                <p>© 2018 www.shuiloutai.com All Right Reserved.水楼台小微企业服务平台版权所有</p>
                <p>技术支持：创巢中小企业众扶平台 </p>
            </div>
        </div>
        <el-dialog
            :visible.sync="centerDialogVisible"
            width="30%"
            center>
            <div class="product-line">您将申请产品{{productName}},请确认</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="success" @click="confrimBtn">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
let CONSTANT = require('../../constant/constant.js'),
    common = require('../../common.js'),
    config = require('../../config/config.js')
export default {
    data() {
        return {
            linkArr:[{
                name:'首页',
                link:'/'
            },{
                name:'贷款产品',
                link:'/product'
            },{
                name:'关于我们',
                link:'/aboutUs'
            }],
            name:'',
            arrow_transform: false,
            dataList:[],
            centerDialogVisible:false,
            productName:'',
            id:'',
            bannerArr:[],
            playerOptions: {
                // videojs options
                muted: false,
                language: 'en',
                playbackRates: [0.7, 1.0, 1.5, 2.0],
                width: 513,
                h: 290,
                sources: [{
                    type: "video/mp4",
                    src: "http://1252042124.vod2.myqcloud.com/8bddf4bevodtransgzp1252042124/58f103ca5285890781017806190/v.f20.mp4"
                }],
                poster:require('../../images/waterHome/video-poster.jpg')
            },
            start: 1,
            end: 1026,
            end1: 3854,
            end2: 2.3,
            newsIndex:0,
            newsArr:[
                {
                    imgUrl:require('../../images/waterHome/banner3.jpg'),
                    title:'科技50创业银行签约',
                    newsName:'知更鸟知识产权银行，在国家知识产权局的报道',
                    newsDesc:'上海嘉定区举办“知更鸟”知识产权银行成立发布会，“知更鸟”知识产权银行正式揭牌，并发布了首款产品"专利贷"',
                    year:'2018年',
                    date:'05月10日',
                    link:'http://www.sipo.gov.cn/dtxx/1124178.htm'
                },
                {
                    imgUrl:require('../../images/waterHome/banner4.jpg'),
                    title:'创业银行&上海嘉定民生村镇银行战略签约',
                    newsName:'嘉定区推动成立“知更鸟”知识产权银行',
                    newsDesc:'4月26日,嘉定区举办“知更鸟”知识产权银行成立发布会上海市知识产权局副局长季晓烨，嘉定区委常委、副区长沈华棣等出席活动并讲话。',
                    year:'2018年',
                    date:'05月04日',
                    link:'http://www.sipa.gov.cn/zscqj/jdqzscqj/20180504/8299.html'
                },
                {
                    imgUrl:require('../../images/waterHome/news3.jpg'),
                    title:'“知更鸟”知识产权银行在南翔智地成立',
                    newsName:'“知更鸟”知识产权银行在南翔智地成立',
                    newsDesc:'4月26日,“知更鸟”知识产权银行在南翔智地成立。区委常委、副区长沈华棣出席活动并讲话。',
                    year:'2018年',
                    date:'04月27日',
                    link:'http://www.jiading.gov.cn/zwpd/zwdt/content_495819'
                },
                {
                    imgUrl:require('../../images/waterHome/news2.jpg'),
                    title:'上海嘉定区举办“知更鸟”知识产权银行',
                    newsName:'发明专利“换”贷款 嘉定成立“知更鸟”知识产权银行',
                    newsDesc:'上海嘉定区举办“知更鸟”知识产权银行成立发布会，“知更鸟”知识产权银行正式揭牌，并发布了首款产品“专利贷”',
                    year:'2018年',
                    date:'04月25日',
                    link:'http://haokan.baidu.com/v?pd=wisenatural&vid=13341686857210638925'
                }
            ],
            configObj:''
        }
    },
    components: {
        'v-countup':() => import('vue-countupjs')
    },  
    created() {
        let arr = location.hostname.split('.');
        let urlName = arr[0] == 'www'?arr[1]:arr[0];
        this.configObj = config.urlObjs[urlName]
        this.name = common.getCookie('nickname')
    },
    mounted(){
        this.name = common.getCookie('nickname')
        document.body.scrollTop = document.documentElement.scrollTop = 0;
        this.getBannerList()
        this.getProductPage()
    },
    methods:{
        //head
        linkTo(link){
           this.$router.push(link)
        },
        changeSwiper(num){
            this.newsIndex = num
            this.$refs.carousel.setActiveItem(num)
        },
        handleLink() {
            const userType = common.getCookie('userType')
            if (userType == 'company') {
                this.linkTo('/ccOrderHand')
            } else if (userType == 'channel') {
                this.linkTo('/channelOrderHand')
            } else {
                this.linkTo('/bankBankOrderHand')
            }
            localStorage.removeItem('defaultOpened')
        },
        loginOut(){
             common.setCookie('sessionId','')
             common.setCookie('nickname','')
             this.$nextTick(() => {
                this.$router.replace('/login')
             })
        },
        transform_arrow(visible) {
            this.arrow_transform = visible;
        },
        //end
        returnPrice(num){
            return common.returnNum(num)
        },
        linkTo(link,id){
            this.$router.push({path: link, query: {id: id}})
        },
        returnArrName(arr){
            let arr1 = []
            arr.map( (item, index) => {
                let itemArea = "";
                if (item.financingProvinceName) {
                    itemArea = item.financingProvinceName
                }
                if (item.financingCityName) {
                    itemArea = item.financingProvinceName+item.financingCityName
                }
                if (item.financingDistrictName) {
                    itemArea = item.financingProvinceName+item.financingCityName+item.financingDistrictName
                }
               arr1.push(itemArea)
            })
            return arr1.join(';')
        },
        returnBody(data){
            let arr = []
            data.map((item)=>{
                arr.push(item.fundBodyDesc)
            })
            return  arr.length?arr.join(','):'--'
        },
        applyBtn(id,name){
            this.centerDialogVisible = true;
            this.productName = name;
            this.id = id;
        },
        confrimBtn(){
                let  url = CONSTANT.URL.SYSTEM.APPLYPRODUCT,
                data = {productId:this.id},
                dataForm = {}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                    this.centerDialogVisible = false;
                    if(res.status == 200){
                        this.$message({
                            message: '申请成功！',
                            type: 'success'
                        });
                    }else{
                        this.$message.error(res.msg);
                    }
                })
        },
        getProductPage(){
            let  url = CONSTANT.URL.WEB.FINDFINANCEBYPAGE,
                data = {},
                dataForm = {
                    pageIndex:1,
                    pageSize:5
                }
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                    if(res.status == 200){
                        this.dataList = res.data.bussData;
                    }else{
                    }
                })
        },
        getBannerList(){
            let url = CONSTANT.URL.WEB.FINDBANNERBYPAGE;
            let dataForm = {},
                data={
                    pageIndex:1,
                    pageSize:10
                }
            common.requestAjax(url,data,dataForm,(res)=>{
                if(res.status == 200){
                     let data = res.data;
                    //  this.bannerArr = res.data.bussData;
                    this.bannerArr = [
                        {
                            imageList:[
                                {fileUrl:require('../../images/waterHome/banner1.jpg')}
                            ]
                        },{
                            imageList:[
                                {fileUrl:require('../../images/waterHome/banner2.jpg')}
                            ]
                        },{
                            imageList:[
                                {fileUrl:require('../../images/waterHome/banner3.jpg')}
                            ]
                        },{
                            imageList:[
                                {fileUrl:require('../../images/waterHome/banner4.jpg')}
                            ]
                        },
                    ]
                }
            })
        }
    }
}
</script>

<style lang="scss">
    @keyframes click {
        0% {
            top: 9px;
        }
        50% {
            top: 14px;
        }
        100% {
            top: 9px;
        }
    }
    .web-header {
        border-bottom: 1px solid #f2f2f2;
    }

    .home-wrap{
        overflow: hidden;
        background-color: #fff;
        .header{
            height: 60px;
            background-color: #fff;
            font-size: 14px;
            line-height: 60px;
            /*padding-right: 18.7%;*/
            overflow: hidden;
            /*width: 85%;*/
            .el-dropdown-menu__item{
                padding: 0;
                span{
                    padding: 0 20px;
                }
            }
            .right-area {
                width: 1200px;
                margin: 0 auto;
                overflow: hidden;
                .head-left-content {
                    font-size: 16px;
                    color: #333333;
                    float: left;
                    img{
                        width: 130px;
                        height: 43px;
                        margin-top: 12px;
                        margin-right: 30px;
                    }
                    a{
                        position: relative;
                        top: -19px;
                        color: #459EFF;
                        font-family:PingFangSC-Regular;
                        margin-right: 13px;
                        padding-bottom: 0px;
                        border-bottom: 1px solid #459EFF;
                        transition:all .2s linear;
                        &:hover{
                            color: #959DFF;
                            border-bottom: 1px solid #959DFF;
                        }
                    }
                }
                .head-right-content {
                    float: right;
                    color: #292929;
                    font-size: 16px;
                    a{
                        color: #292929;
                        margin-left: 27px;
                    }
                    .btn-link{
                        width: 92px;
                        height: 28px;
                        border-radius: 40px;
                        background-color: #459EFF;
                        color: #fff;
                        text-align: center;
                        line-height: 28px;
                        margin-top: 15px;
                        margin-left: 33px;
                        transition:all .2s linear;
                        cursor: pointer;
                        &:hover{
                            background-color: #959DFF;
                        }
                        &:active{
                            background-color: #7B83E5;
                        }
                    }
                    div {
                        float: right;
                    }
                    .r-pointer {
                        cursor: pointer;
                    }
                    .r-block {
                        float: right;    
                        font-size: 14px;          
                        span {
                            margin-left: -6px;
                            &:before {
                                position: relative;
                                right: 6px;
                            }
                        }
                        .r-inline {
                            float: right;
                            margin-left: 20px;                    
                        }
                        .regist {
                            width: 60px;
                            height: 26px;
                            background-color: #ED7018;
                            text-align: center;
                            border-radius: 13px;
                            position: relative;
                            top: 7px;
                            line-height: 28px;
                            margin-left: 0px;
                            color: white;
                        }
                    }
                    .nikname {
                        color: #666666;
                    }
                    .logout {
                        color: #000000;
                        font-weight: bold;
                    }
                    .separator {
                        margin-left: 23px;
                        margin-right: 23px;
                        color: #D1D1D1
                    }
                }
            }
            .tip{
                padding: 0 1.46% 0 .48%;
            }
            .my-home {
                color: #EE7723;
                cursor: pointer;
            }
            .col-sufix {
                margin: 0 3px 0 3px;
                color: #EE7723;
            }
            .login1 {
                color: #EE7723;
                cursor: pointer;
            }
            .login {
                /*padding: 0 1.46% 0 .48%;*/
                &.name{
                    color: #111111;
                }
                .arrow{
                    width: 9px;
                    height: 7px;
                    margin-top: 16px;
                    background: url(../../images/arrow1.png) no-repeat;
                    background-size: 100%;
                    margin-left: 7px;
                    transform:rotate(0deg);
                    -ms-transform:rotate(0deg); /* Internet Explorer */
                    -moz-transform:rotate(0deg); /* Firefox */
                    -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
                    -o-transform:rotate(0deg); /* Opera */
                    transition: transform 0.5s;
                    -moz-transition: transform 0.5s; /* Firefox 4 */
                    -webkit-transition: transform 0.5s; /* Safari 和 Chrome */
                    -o-transition: transform 0.5s; /* Opera */
                }
                &:hover {
                    .arrow {
                        transform:rotate(-180deg);
                        -ms-transform:rotate(-180deg); /* Internet Explorer */
                        -moz-transform:rotate(-180deg); /* Firefox */
                        -webkit-transform:rotate(-180deg); /* Safari 和 Chrome */
                        -o-transform:rotate(180deg); /* Opera */
                        transition: transform 0.2s;
                        -moz-transition: transform 0.2s; /* Firefox 4 */
                        -webkit-transition: transform 0.2s; /* Safari 和 Chrome */
                        -o-transition: transform 0.2s; /* Opera */
                    }
                }
                .arrow-transform {
                    transform:rotate(-180deg);
                    -ms-transform:rotate(-180deg); /* Internet Explorer */
                    -moz-transform:rotate(-180deg); /* Firefox */
                    -webkit-transform:rotate(-180deg); /* Safari 和 Chrome */
                    -o-transform:rotate(180deg); /* Opera */
                    transition: transform 0.2s;
                    -moz-transition: transform 0.2s; /* Firefox 4 */
                    -webkit-transition: transform 0.2s; /* Safari 和 Chrome */
                    -o-transition: transform 0.2s; /* Opera */
                }
            }
            .header-select{
                position: relative;
                color: #EE7723;
                padding-right: .48%;
                &:after{
                    content: '';
                    position: absolute;
                    width: 1px;
                    height: 14px;
                    background-color: #D1D1D1;
                    right: 0;
                    top:14px;
                }
            }
            /*
            div{
                float: right;
                cursor: pointer;
            }
            */
        }
        .swiper-wrap{
            height: 500px!important;
            .banner{
                background-image:url(../../images/banner.png);
                background-repeat:no-repeat;
            }
            .el-carousel {
                height: 100%;
                .el-carousel__container {
                    height: 100%;
                }
            }
            .el-carousel__arrow{
                font-size: 22px;
                width: 60px;
                height: 60px;
                background-color: rgba(31,45,61,.15);
                &:hover{
                    background-color: rgba(31,45,61,.3);
                }
            }
            .el-carousel__indicator{
                width: 14px;
                height: 14px;
                border-radius: 50%;
                &.is-active{
                    .el-carousel__button{
                        background-color: #ED7018;
                        border: none;
                        border: 1px solid #ED7018;
                    }
                }
                .el-carousel__button{
                    width: 14px;
                    height: 14px;
                    border-radius: 50%;
                    border: 1px solid rgba(153,153,153,0.4);
                    box-sizing: border-box;
                    background-color: #fff;
                    opacity: 1;
                }
            }
            .el-carousel__indicators{
                bottom: 75px;
            }
            .el-carousel__item {
                a {
                    height: 100%;
                }
            }
            .el-carousel__item h3 {
                color: #475669;
                font-size: 18px;
                opacity: 0.75;
                line-height: 300px;
                margin: 0;
            }
            
            .el-carousel__item:nth-child(2n) {
                background-color: #99a9bf;
            }
            
            .el-carousel__item:nth-child(2n+1) {
                background-color: #d3dce6;
            }
            @media screen and (max-width: 1440px) {
                height: 400px;
            }
            @media screen and (min-width: 1441px) and (max-width: 1600px) {
                height: 499px;
            }
        }
        .total-num{
            position: relative;
            width: 1200px;
            height:120px;
            background-color: #fff;
            border-radius: 4px;
            -webkit-border-radius: 4px;
            margin: -74px auto 0;
            z-index: 100;
            box-shadow: 5px 18px 35px  rgba(0, 0, 0, .06); 
            overflow: hidden;
            padding-top: 40px;
            padding-bottom: 30px;
            .total-list{
                float: left;
                font-size: 20px;
                color: #666;
                width: 33.33%;
                height: 110px;
                text-align: center;
                border-right: 1px solid #D1D1D1;
                box-sizing: border-box;
                &:last-child{
                    border: none;
                }
                .list-num{
                    margin-bottom: 12px;
                    padding-top: 10px;
                    span.num{
                        font-size: 50px;
                        color: #ED7018;
                    }
                    span.num-name{
                        position: relative;
                        top: -10px;
                        margin-left: 12px;
                        display: inline-block;
                        height: 40px;
                        line-height: 40px;
                    }
                }
                .list-name{
                    font-size: 16px;
                    color: #333;
                }
            }
            @media screen and (max-width: 1440px) {
                height: 100px;
                padding-top: 20px;
                padding-bottom: 25px;
            }
            @media screen and (min-width: 1441px) and (max-width: 1600px) {
                height: 120px;
            }
        }
        .vjs-poster{
            background-color: #fff!important;
        }
        //金融服务
        .product-service{
            margin-top: 92px;
            background-color: #fff;
            padding-bottom: 80px;
            .title{
                text-align: center;
                .name{
                    color: #262626;
                    font-size: 30px;
                    font-weight: bold;
                }
                div{
                    color: #CBCBCB;
                    font-size: 20px;
                    margin-top: 5px;
                }
            }
            .service-wrap{
                width: 1200px;
                margin: 0 auto;
                margin-top: 30px;
                .service-loan{
                    float: left;
                }
                .service-investment{
                    position: relative;
                    float: left;
                    margin-left: 51px;
                    .service-btn{
                        margin-top: 38px!important;
                    }
                    &:after{
                        position: absolute;
                        left: -26px;
                        top: 15px;
                        content: '';
                        width: 1px;
                        height: 430px;
                        background-color:#D1D1D1;
                    }
                }
                .service-title{
                    position: relative;
                    padding: 10px;
                    color: #262626;
                    font-size: 16px;
                    font-weight: bold;
                    &:after{
                        content: '';
                        position: absolute;
                        left: 1px;
                        top: 14px;
                        width: 5px;
                        height: 16px;
                        background-color: #262626;
                    }
                }
                .service-item{
                     
                    .service-list{
                        width: 375px;
                        float: left;
                        margin-left: 14px;
                        &:first-child{
                            margin-left: 0;
                        }
                        img{
                            width: 375px;
                            height: 188px;
                            -webkit-transition: opacity .35s,-webkit-transform .35s;
                            transition: opacity .35s,transform .35s;
                            cursor: pointer;
                            &:hover{
                                -webkit-transform: scale(1.04);
                                transform: scale(1.04);
                                filter: alpha(opacity=100);
                                -moz-opacity: 1;
                                -webkit-opacity: 1;
                                -ms-opacity: 1;
                                opacity: 1;  
                            }
                        }
                        .line-list{
                            font-size: 12px;
                            color: #8E8E8E;
                            margin-bottom: 7px;
                        }
                        .service-btn{
                            width: 80px;
                            height: 25px;
                            line-height: 25px;
                            text-align: center;
                            color: #fff;
                            font-size: 14px;
                            border-radius: 40px;
                            -webkit-border-radius: 40px;
                            background-color:#8992FF;
                            cursor: pointer;
                            transition:all .2s linear;
                            margin-top: 14px;
                            &:hover{
                                background-color: #959DFF;
                            }
                            &:active{
                                background-color: #7B83E5;
                            }
                        }
                        .service-desc{
                            font-size: 12px;
                            color: #8E8E8E;
                            line-height: 28px;
                        }
                        .service-infos{
                           
                            .title-text{
                                font-size: 16px;
                                color: #262626;
                                margin: 19px 0 17px;
                                .state{
                                    float: right;
                                    font-size: 12px;
                                    color: #FF0000;
                                }
                            }
                            .service-line{
                                float: left;
                                width:49%;
                                font-size: 12px;
                                color: #8E8E8E;
                                .line-item{
                                    margin-bottom: 7px;
                                }
                            }
                        }
                    }
                }

            }
        }
        //服务案例
        .service-case{
            background-color: #F7F7F7;
            padding-bottom: 80px;
            padding-top: 80px;
            .title{
                text-align: center;
                .name{
                    color: #262626;
                    font-size: 30px;
                    font-weight: bold;
                }
                div{
                    color: #CBCBCB;
                    font-size: 20px;
                    margin-top: 5px;
                }
            }
            .case-wrap{
                margin: 30px 0 0;
                .el-carousel__container {
                    height: 330px;
                }
                .el-carousel__arrow{
                    width: 73px;
                    height: 73px;
                    font-size: 50px;
                    background-color: #efefef!important;;
                    border: 0px!important;;
                    &:hover{
                        background-color: #e1e1e1!important;
                    }
                    i{
                        color:#fff!important;
                    }
                }
                .el-carousel__arrow--left{
                    position: relative;
                    left: 87px!important;
                }
                .el-carousel__arrow--right{
                    // position: relative;
                    right:87px !important;
                }
                .case-item{
                    width: 1200px;
                    margin: 0 auto;
                    .case-list{
                        width: 263px;
                        height: 330px;
                        background-color: #fff;
                        margin-right: 28px;
                        cursor: pointer;
                        -webkit-transition: opacity .35s,-webkit-transform .35s;
                        transition: opacity .35s,transform .35s;
                        &:hover{
                            -webkit-transform: scale(1.04);
                            transform: scale(1.04);
                            filter: alpha(opacity=100);
                            -moz-opacity: 1;
                            -webkit-opacity: 1;
                            -ms-opacity: 1;
                            opacity: 1;  
                        }
                        .case-head{
                            position: relative;
                            margin: 0 21px 0 13px;
                            height: 85px;
                            border-bottom: 1px solid #D9D9D9;
                            &:after{
                                position: absolute;
                                bottom: -6px;
                                left: 0;
                                content: '';
                                width: 61px;
                                height: 5px;
                                background-color: #747474;
                            }
                        }
                        .case-title{
                            color: #656565;
                            font-size: 14px;
                            margin: 30px 21px 15px 12px;
                        }
                        .case-desc{
                            color: #999999;
                            font-size: 14px;
                            word-wrap:break-word;
                            margin: 0px 21px 0px 12px;
                            line-height: 26px;
                        }
                        &:first-child{
                            margin-left: 26px;
                        }
                        &:last-child{
                            margin-right: 0;
                        }
                    }
                }
            }
        }
        //新闻资讯
        .news-wrap{
            padding-top: 80px;
            background-color: #fff;
            padding-bottom: 80px;
            .title{
                text-align: center;
                .name{
                    color: #262626;
                    font-size: 30px;
                    font-weight: bold;
                }
                div{
                    color: #CBCBCB;
                    font-size: 20px;
                    margin-top: 5px;
                }
            }
            .news-content{
                width: 1200px;
                margin: 30px auto 0;
                .el-carousel__indicators{
                    display:none!important;
                }
                .el-carousel__container{
                    width: 535px;
                    margin-right: 23px;
                    .el-carousel__arrow{
                        display: none!important;
                    }
                    
                    .news-modal{
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        height: 40px;
                        line-height: 40px;
                        background-color: rgba(0,0,0,.2);
                    }
                    .news-text{
                        position: absolute;
                        bottom: 10px;
                        left: 16px;
                        color: #fff;
                        font-size: 18px;
                    }
                    img{
                        width: 535px;
                        height: 351px;
                    }
                }
                .news-nums{
                    position: absolute;
                    bottom: 5px;
                    right: 15px;
                    z-index: 1001;
                    
                    .new-num{
                        width: 20px;
                        height: 20px;
                        font-size: 14px;
                        color: #5A5A5A;
                        text-align: center;
                        line-height: 20px;
                        background-color: #fff;
                        margin: 5px;
                        border: 0px;
                        border-radius: 2px;
                        -webkit-border-radius: 2px;
                        cursor: pointer;
                        &.active{
                            background-color: #ffff50;
                        }
                    }
                }
                .news-item{
                    margin-left: 23px;
                    width: 565px;
                    .news-list{
                        margin-bottom: 30px;
                        &:last-child{
                            margin-bottom: 0;
                        }
                        .dates{
                            width:72px;
                            height: 64px;
                            box-sizing: border-box;
                            font-size: 14px;
                            color: #fff;
                            div{
                                height: 32px;
                                text-align: center;
                                line-height: 32px;
                                background-color: #dbe650;
                                &:last-child{
                                    background-color: #8992ff;
                                }
                            }
                        }
                        .news-infos{
                            width: 480px;
                            margin-left: 10px;
                            .news-title{
                                display: block;
                                position: relative;
                                top: -3px;
                                color: #5A5A5A;
                                font-size: 20px;
                            }
                            .news-desc{
                                display: block;
                                position: relative;
                                bottom: -1px;
                                color: #BABABA;
                                font-size: 14px;
                            }
                        }
                    }
                }
            }
        }
        //风险贷款
        .agency-wrap{
            background-color: #fff;
            padding-bottom: 80px;
            padding-top: 80px;
            .title{
                text-align: center;
                .name{
                    color: #262626;
                    font-size: 30px;
                    font-weight: bold;
                }
                div{
                    color: #CBCBCB;
                    font-size: 20px;
                    margin-top: 5px;
                }
            }
            .agency-content{
                width: 1200px;
                margin: 30px auto 0;
                overflow: hidden;
                .agency-list{
                    width: 189px;
                    height: 58px;
                    float: left;
                    margin-right: 13px;
                    margin-bottom: 47px;
                    text-align: center;
                    line-height: 58px;
                    font-size: 18px;
                    color: #9B9B9B;
                    box-sizing: border-box;
                    &.line{
                        border: 1px solid #eee;
                    }
                    &:nth-child(6n){
                        margin-right: 0px;
                    }
                    img{ 
                        width: 189px;
                        height: 58px;
                    }
                }
            }
        }
        //合作机构
        .about-wrap{
            background-color: #F7F7F7;
            min-height: 502px;
            padding-top: 80px;
            padding-bottom: 50px;
            .about-container{
                width: 1200px;
                margin:0 auto;
                overflow: hidden;
            }
            .title{
                text-align: center;
                .name{
                    color: #262626;
                    font-size: 30px;
                    font-weight: bold;
                }
                div{
                    color: #CBCBCB;
                    font-size: 20px;
                    margin-top: 5px;
                }
            }
            .img-left{
                float:left;
                width: 300px;
            }
            .about-content{
                float:left;
                width: 900px;
                margin: 10px auto;
                div{
                    text-indent: 40px;
                    text-align: left;
                    font-size: 16px;
                    color: #9B9B9B;
                    margin-bottom: 10px;
                    line-height: 30px;
                    &:last-child{
                        margin-top: 35px;
                    }
                }
            }
            .btns{
                width: 1200px;
                margin: 41px auto 0;
                font-size: 18px;
                .btn-concat{
                    display: block;
                    width: 324px;
                    height: 60px;
                    color: #3C3C3C;
                    background-color: #fff;
                    border-radius: 40px;
                    -webkit-border-radius: 40px;
                    text-align: center;
                    line-height: 60px;
                    -webkit-box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.06);
                    box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.06);
                }
                .btn-apply{
                    width: 198px;
                    height: 60px;
                    border-radius: 40px;
                    -webkit-border-radius: 40px;
                    text-align: center;
                    line-height: 60px;
                    color: #fff;
                    background-color: #8992FF;
                    transition:all .2s linear;
                    cursor: pointer;
                    &:hover{
                        background-color: #959DFF;
                    }
                    &:active{
                        background-color: #7B83E5;
                    }
                }
            }
        }
        //风险贷款
        .price-wrap{
           background-color: #F7F7F7;
           overflow: hidden;
           padding-bottom: 80px;
           padding-top: 80px;
            .title{
                text-align: center;
                .name{
                    color: #262626;
                    font-size: 30px;
                    font-weight: bold;
                }
                div{
                    color: #CBCBCB;
                    font-size: 20px;
                    margin-top: 5px;
                }
            }
            .service-info{
                width: 1154px;
                margin: 30px auto 0;
                background-color: #fff;
                overflow: hidden;
                height: 290px;
                padding: 35px 37px 38px 40px;
            }
            .video-player{
                /*margin-left: 59px;*/
                width: 513px;
                float: left;
                height: 290px;
                .video-js{
                    height: 290px;
                    background-color: #fff;
                }
            }
            video{
                float: left;
                /*
                width: 422px;
                height: 265px;
                */
            }
            .price-info{
                float: left;
                width: 591px;
                margin-right: 50px;
                p{
                    font-size: 16px;
                    color: #646464;
                    margin-top: 10px;
                    line-height: 25px;
                    margin-bottom: 18px;
                }
                .info-title{
                    font-weight: bold;
                    font-size: 24px;
                    padding-top: 0px;
                    margin-bottom: 30px;
                    color: #000000;
                    .icon{
                        background-image:url('../../images/waterHome/book.png');
                        background-repeat:no-repeat;
                        width: 38px;
                        height: 26px;
                        background-size: 100%;
                        margin-right: 11px;
                    }
                }
            }
        }
        //底部
        .footer{

            height: 138px;
            background-color: #2c2c2c;
            padding-top: 32px;
            font-size: 14px;
            color: #B1B1B1;
            .footer-wrap{
                width: 1200px;
                margin: 0 auto;
                text-align: center;
                color: #B1B1B1;
                p{
                    a{
                        color: #B1B1B1;
                        margin-left: 20px;
                    }
                }
            }
        }
    }
</style>
